<template>
  <div :class="{'zoom-container':true,zoomed:isZoomed}" @mouseover="startZoom" @mouseleave="stopZoom">
    <div :class="{content:true,zoomed:isZoomed}">Hover me for smooth zoom</div>
  </div>
</template>

<style>
.zoom-container {
  display: inline-block;
  overflow: hidden;
  transition: transform 0.9s ease; /* 添加过渡效果 */
  color: red;
  font-size: 20px;
}

.content {
  padding: 20px;
  background: #333333;
}

.zoomed {
  transform: scale(1.5) scale(0.7) scale(1); /* 缩放比例，这里设为1.1表示放大10% */
}
</style>

<script>
export default {
  data() {
    return {
      isZoomed: false
    };
  },
  methods: {
    startZoom() {
      this.isZoomed = true;
    },
    stopZoom() {
      this.isZoomed = false;
    }
  }
};
</script>
